<template>
  <div>
    <div v-if="mode === 'DESIGN'">{{ placeholder }} 根据公式计算</div>
    <div v-else>{{ placeholder }} {{ _value }}</div>
  </div>
</template>

<script>
import { computed, reactive, toRefs, watch } from 'vue'
import componentMinxins from '/@/views/setting/workflow/components/ComponentMinxins'

export default {
    mixins: [componentMinxins],
    name: 'CalcFormula',
    props: {
        modelValue: {
            type: Number,
            default: null,
        },
        placeholder: {
            type: String,
            default: '计算结果 = ',
        },
        explain: {
            type: Array,
            default: () => {
                return []
            },
        },
        jsCode: {
            type: String,
            default: '',
        },
        enableScan: {
            type: Boolean,
            default: false,
        },
        isPlus: {
            type: Boolean,
            default: false,
        },
        formData: {
            type: Object,
            default: () => {
                return {}
            },
        },
        precision: {
            type: Number,
            default: 0,
        },
        index: {
            type: Number,
            default: 0,
        },
    },
    setup(props, context) {
        const { explain, index, isPlus, jsCode, formData, precision, modelValue } = toRefs(props)
        const state = reactive({
            visible: false,
            execute: null,
            showError: false,
            errorInfo: null
        })
        const _value = computed({
            get: () => {
                return modelValue.value
            },
            set: val => {
                context.emit('update:modelValue', val)
            }
        })
        const explainStr = computed(() => {
            let explains = ''
            explain.value.forEach((item) => {
                const v = String(item.symbol || item)
                if (/[0-9.]$/.test(v)) {
                    explains += v
                } else {
                    explains += v + ' '
                }
            })
            return explains
        })
        const doExc = () => {
            try {
                if (!(state.execute instanceof Function)) {
                    if (isPlus.value) {
                        const jsExplain = jsCode.value.replace(/\[\?\]/g, (m) => '[$_index]')
                            state.execute = new Function(
                            'formData',
                            `let $_index = ${
                                index.value > 0 ? index.value - 1 : 0
                            }; ${jsExplain} return execute(formData)`
                        )
                    } else {
                        state.execute = new Function('formData', `return ${explainStr.value}`)
                    }
                }
                let result = state.execute(formData.value)
                _value.value =
                precision.value > 0
                    ? Number.isNaN(result)
                    ? NaN
                    : parseFloat(result.toFixed(precision.value))
                    : parseInt(result)
                state.showError = false
            } catch (e) {
                state.showError = true
                state.errorInfo = e
                _value.value = NaN
                console.log(e)
            }
        }
        watch(() => formData.value,
            () => {
                doExc()
            },
            { 
                deep: true,
                immediate: true 
            },
        )
        return {
            ...toRefs(state),
            _value
        }
    }
}
</script>

<style>

</style>